<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  <meta content="telephone=no" name="format-detection"/>
  <title>剑桥英语</title>
  <script rel="stylesheet" src="./common/js/flexible.js"></script>
  <link rel="stylesheet" href="./common/css/reset.css">
  <link rel="stylesheet" href="./css/course-list.css">
</head>
<body>
<div>
  <div id="header"></div>

  <div class="banner">
    <img src="./img/banner.png" alt="" class="banner-img">
  </div>

  <div class="describe">
    <div class="user flex row-right">
      <span class="username">你好，Agentone</span>
      <a href="./edit-password.html" class="user-edit br">修改密码</a>
      <a href="javascript:;" class="user-edit signout">退出</a>
    </div>
    <div class="describe-t flex row-center">
      <span class="yellow-line"></span>
      <div class="describe-title">在线课程</div>
      <span class="yellow-line"></span>
    </div>
  </div>

  <div class="introduce-view">
    <div class="introduce-wrapper">
      <img src="./img/course-list/introduce-img.png" class="introduce-img" alt="">
      <h2 class="title">剑桥领思备考课程</h2>
      <div class="class-hour">总课时：36课时</div>
      <!-- 请注意 此标签内为文字环绕效果，放入里面的文字不可以实现分段效果 如果想实现分段效果，请使用下面的p标签进行包裹 -->
      <span class="introduce-content">
        剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由题材和体裁广泛的近篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达方式。本教程编写紧扣时代潮流，内容符合中学生的学习趣，有助于进一步了解世界万象，同时提高语言能力。
        剑桥英语青少版扩展阅读系列丛书引进并改编自Success with Reading英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由题材和体裁广泛的近100篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达方式。本教程编写紧扣时代潮流，内容符合中学生的学习趣，有助于进一步了解世界万象，同时提高语言能力。
      </span>
      <!-- 文字分段 -->
      <!--<p class="paragraph">
        剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版，配套合剑桥英语青少版的进阶式补充阅读教程，每本教程由题材和体裁广泛的近篇阅读文章和精心选配的图片、实用的练习题组成。阅读材料全部取自原汁原味的英语文章，学生可以从中学习到地道的英语句法结构和表达方式。本教程编写紧扣时代潮流，内容符合中学生的学习趣，有助于进一步了解世界万象，同时提高语言能力。
      </p>-->
    </div>
    <div class="more flex row-center">
      <span class="more-msg">展开详情</span>
      <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="">
    </div>
  </div>

  <div class="card-list">
    <div class="card">
      <div class="title-content">
        <img src="./img/course-list/course-cover-img.png" class="course-cover-img" alt="">
        <div class="wrap">
          <h3 class="title">第一课  标题标题标题标标题标</h3>
          <div class="inner flex row-between">
            <div>课时：<span>16：30</span></div>
            <div>学习次数：<span>6966</span></div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-msg">
          <p class="msg-text">
            剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版料全部取自全部取自原汁原味汁原味写紧扣近100篇阅读文章和精剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版料全部取自全部取自原汁原味汁原味写紧扣近100篇阅读文章和精
          </p>
          <div class="more flex row-center absolute">
            <span class="more-msg">展开详情</span>
            <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="">
          </div>
        </div>
      </div>
      <a href="./course-play.html" class="play-study flex row-center hover-class">
        <span>开始学习</span>
        <img src="./img/course-list/player.png" class="player" alt="">
      </a>
    </div>
    <div class="card">
      <div class="title-content">
        <img src="./img/course-list/course-cover-img.png" class="course-cover-img" alt="">
        <div class="wrap">
          <h3 class="title">第一课  标题标题标题标标题标</h3>
          <div class="inner flex row-between">
            <div>课时：<span>16：30</span></div>
            <div>学习次数：<span>6966</span></div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-msg">
          <p class="msg-text">
            剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版料全部取自全部取自原汁原味汁原味写紧扣近100篇阅读文章和精
          </p>
          <div class="more flex row-center absolute">
            <span class="more-msg">展开详情</span>
            <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="">
          </div>
        </div>
      </div>
      <a href="./course-play.html" class="play-study flex row-center hover-class">
        <span>开始学习</span>
        <img src="./img/course-list/player.png" class="player" alt="">
      </a>
    </div>
    <div class="card">
      <div class="title-content">
        <img src="./img/course-list/course-cover-img.png" class="course-cover-img" alt="">
        <div class="wrap">
          <h3 class="title">第一课  标题标题标题标标题标</h3>
          <div class="inner flex row-between">
            <div>课时：<span>16：30</span></div>
            <div>学习次数：<span>6966</span></div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-msg">
          <p class="msg-text">
            剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版料全部取自全部取自原汁原味汁原味写紧扣近100篇阅读文章和精
          </p>
          <div class="more flex row-center absolute">
            <span class="more-msg">展开详情</span>
            <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="">
          </div>
        </div>
      </div>
      <a href="./course-play.html" class="play-study flex row-center hover-class">
        <span>开始学习</span>
        <img src="./img/course-list/player.png" class="player" alt="">
      </a>
    </div>
    <div class="card">
      <div class="title-content">
        <img src="./img/course-list/course-cover-img.png" class="course-cover-img" alt="">
        <div class="wrap">
          <h3 class="title">第一课  标题标题标题标标题标</h3>
          <div class="inner flex row-between">
            <div>课时：<span>16：30</span></div>
            <div>学习次数：<span>6966</span></div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-msg">
          <p class="msg-text">
            剑桥英语青少版扩展阅读系列丛书引进并改编自英文原版料全部取自全部取自原汁原味汁原味写紧扣近100篇阅读文章和精
          </p>
          <div class="more flex row-center absolute">
            <span class="more-msg">展开详情</span>
            <img src="./img/course-list/down-arrow.png" class="arrow-img" alt="">
          </div>
        </div>
      </div>
      <a href="./course-play.html" class="play-study flex row-center hover-class">
        <span>开始学习</span>
        <img src="./img/course-list/player.png" class="player" alt="">
      </a>
    </div>
  </div>

  <div class="pagination flex row-center">
    <a href="javascript:;" class="pager-btn prev hover-class">上一页</a>
    <div class="pager flex row-between">
      <a href="javascript:;" class="hover-class number active">1</a>
      <a href="javascript:;" class="hover-class number">2</a>
      <a href="javascript:;" class="hover-class number">3</a>
      <a href="javascript:;" class="hover-class number">4</a>
    </div>
    <a href="javascript:;" class="pager-btn next hover-class">下一页</a>
  </div>

  <div class="bg-wrapper">
    <img src="./img/course-list/bg.png" alt="">
  </div>

  <div class="card-win">
    <div class="content" style="background-image: url('./img/content-2.png')">
      <h2 class="title flex">
        <span class="title-msg-zh">报名考试</span>
        <span class="title-msg-en">Candidate Registration</span>
      </h2>
      <div class="btn-group flex-col row-center" style="padding-left: .38rem; height: 3.12rem;">
        <a href="./individual-registration.html" class="btn">个人报名</a>
        <a href=./mechanism-registration.html class="btn">机构报名</a>
      </div>
    </div>

    <div class="content" style="background-image: url('./img/content-1.png'); margin-top: .82rem;">
      <h2 class="title flex">
        <span class="title-msg-zh">我要咨询</span>
        <span class="title-msg-en">Consulting</span>
      </h2>
      <div class="btn-group flex-col row-center col-bottom" style="padding-right: .5rem; height: 3.12rem;">
        <a href="./common-problem.html" class="btn">考试常见问题FAQ</a>
        <a href="javascript:;" class="btn">在线课程咨询</a>
        <a href="./business-cooperation.html" class="btn">商务合作</a>
      </div>
    </div>
  </div>

  <div class="signout-layer flex row-center">
    <div class="signout-layer-bg"></div>
    <div class="layer-content">
      <img src="./img/close.png" class="close-img" alt="">
      <div class="title">您即将退出本次登录</div>
      <div class="layer-group flex row-between">
        <a href="javascript:;" class="layer-group-btn btn-cancel hover-class">取消</a>
        <a href="javascript:;" class="layer-group-btn hover-class">确定</a>
      </div>
    </div>
  </div>

  <div id="footer">
  </div>
</div>
<script src="./common/js/jquery-2.1.1.min.js"></script>
<script src="./common/js/index.js"></script>
<script src="./js/course-list.js"></script>
</body>
</html>
